<template>
    <div id="lottery">
            <div class="content">
                <div class="navbar" :class="showBar?'active':''">
                <div class="icon" @click="goBack">
                    <i class="iconfont">&#xe72d;</i>
                </div>
                <div class="title" v-text="title"></div>
            </div>
            <div class="placeholder"></div>
            <lottery
                @lotteryClick="lotteryClick"
                @lotteryDone="lotteryDone"
                :lottery-start="lotteryStart"
                :lottery-prizenum="prizenum"
                :lottery-prizeno="prizeno"
                :lottery-bg='lotteryBg'
                :content-bg='lotteryContent.img'
                :pointer-bg='pointerBg'
                :lottery-width="['85%','40%']"
                :prize_list=prize_list
            />
            <p class="rule">
                <span v-for="(item,index) in rule" :key="index">
                    {{item}} <span v-if="index==0">，</span>   
                </span>
            </p>
            <p class="chance">
                您还有<span>{{is_free==0?0:1}}</span>次机会
            </p>
            <div class="record-btn" @click="lookRecoed">中奖记录</div>
        </div>
        <!-- 弹出框 -->
        <van-popup v-model="showModal" class="modal">
            <div class="thank result" v-if="type==1">
                <div class="btn" @click="goOn">不服气继续啊</div>
                <span class="close" @click="close"></span>
            </div>
            <div class="result startUp" v-else-if="type==-2">
                <div class="title">
                    <p>你的免费次数已用光</p>
                    <p>再次转动需要消耗<span>120</span>积分</p>
                </div>
                <div class="btn" @click="goOn">立即启动</div>
                <span class="close" @click="close"></span>
            </div>
            <div class="result noPoint" v-else-if="type==100">
                <div class="title">您的剩余积分不足</div>
                <router-link to="/userFriend" class="btn">赚取积分</router-link>
                <span class="close" @click="close"></span>
            </div>
            <div class="result" v-else>
                <span class="title">恭喜您！</span>
                <p>您获得{{result.name}}</p>
                <div class="btn" @click="goOn">继续抽奖</div>
                <span class="close" @click="close"></span>
            </div>
        </van-popup>
        <!-- 中奖纪录 -->
        <van-popup v-model="recordModal" class="recordModal">
            <span class="closeModal" @click="closeModal"></span>
            <div class="title">我的中奖纪录</div>
            <div class="tab">
                <span class="time">中奖时间</span>
                <span class="product">获得奖品</span>
            </div>
            <div class="list" v-for="(item,index) in historyList" :key="index">
                <span class="time">{{item.created_at|filtertimestamp}}</span>
                <span class="product">{{item.name}}</span>
            </div>
            <div class="btns">
                <div class="prev-btn btn" v-if="page>1" @click="pageTurn(1)">上一页</div>
                <div class="next-btn btn" v-if="totalPage!==page" @click="pageTurn(2)">下一页</div>
            </div>
            <!-- loading -->
            <requestLoading v-show="requestLoading"></requestLoading>
        </van-popup>
    </div>
</template>

<script>
    import {drawInfo,lotteryDraw,drawHistory} from 'api/game_box'
    import {formatDate} from 'js/date'
    import lottery from 'common/lotteryComponent'
    import requestLoading from 'common/requestLoading'
    export default {
       data(){
           return{
               requestLoading:false,
               lotteryStart:0,
               lotteryBg:require('../../assets/image/lottery-bg.png'),
               lotteryContent:{
                    img:require('../../assets/image/lottery-content.png')
                },
                pointerBg:require('../../assets/image/lottery-pointer.png'),
                title:"幸运大转盘",
                showModal:false,
                recordModal:false,
                prize_list: [], //奖品列表
                rule:[],
                prizeno:1,
                prizenum:6,
                result:[],
                is_free:0,
                num:0,
                need:-1,
                yourMsg:'',
                page:1,
                totalPage:1,
                pagesize:8,
                historyList:[],
                showBar:false,
                type:-1
           }
       },
       created(){
           this.init();
       },
       filters:{
           filtertimestamp(time){
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy年MM月dd日 hh:mm:ss');
            }
       },
       methods:{
           init(){
               drawInfo().then(res=>{
                   if(res.data.error==0){
                      this.prize_list=res.data.content.award;
                      this.need=res.data.content.expend_coin;
                      this.is_free=res.data.content.is_free;
                      this.rule=res.data.content.rule;
                   }
               })
           },
           goBack(){
                if (window.history.length <= 1) {
                    this.$router.push({path:'/'})
                } else {
                    this.$router.go(-1)
                }
            },
            lotteryClick(){
                 if(this.turning==true){
                    return;
                }
                 this.is_free==false?this.num++:'';
                 if(this.is_free==false&&this.num==1){
                    this.showModal=false;
                    this.type=-2;
                    this.showModal=true;
                    return;
                 }
                else{
                    this.lotteryStarting();
                }
            },
            lotteryStarting(){
                this.turning=true;
                lotteryDraw().then(res=>{
                    this.is_free=false;
                    if (res.data.error == 0) {
                        let id=res.data.content.id;
                        let num=this.prize_list.findIndex((value)=>{
                            return value.id==id;
                        })
                        this.result=res.data.content;
                        this.prizeno=this.prize_list.length-num;
                        this.lotteryStart=1;
                    }else if(res.data.error==106){
                        this.type=100;
                        this.turning=false;
                        this.lotteryStart=0;
                        this.showModal=true;
                    }
                })
            },
            lotteryDone(){
                this.turning=false;
                this.lotteryStart=0;
                this.type=this.result.type;
                this.showModal=true;

                // this.result.type==1?this.showModal=false:this.showModal=true;
            },
            close(){
                 this.showModal=false;
                 this.turning=false;
            },
            closeModal(){
                this.recordModal=false;
            },
            lookRecoed(){
                this.page=1;
                this.history()
                this.recordModal=true;
            },
            pageTurn(type){
                this.requestLoading=true;
                if(type==1&&this.page!==1){
                    this.page--;
                    this.history();
                }else if(type==2&&this.page!==this.totalPage){
                    this.page++;
                    this.history();
                }
            },
            history(){
                drawHistory(this.page,this.pagesize).then(res=>{
                    if(res.data.error==0){
                        setTimeout(()=>{
                            this.requestLoading=false;
                            this.historyList=res.data.content.data;
                            this.totalPage=res.data.content.totalPage;
                        },300)
                    }else{
                        this.requestLoading=false;
                    }
                })
            },
            handleScroll(){
              let top= document.documentElement.scrollTop||document.body.scrollTop;
              if(top>20){
                this.showBar=true;
              }else{
                 this.showBar=false;
              }
            },
            goOn(){
                this.is_free==false?this.num++:'';
                if(this.is_free==false&&this.num==1){
                    this.showModal=false;
                    this.type=-2;
                    this.showModal=true;
                }else{
                    this.showModal=false;
                    this.turning=false;
                    this.lotteryStarting();
                }
            }

       },
       components:{
           lottery,
           requestLoading
       },
        mounted () {
           window.addEventListener('scroll', this.handleScroll);
        },
        destroyed (){
            window.removeEventListener('scroll', this.handleScroll);
        }
    }
</script>

<style scoped lang="scss">
@import "~styles/variable.scss";
@import "~styles/mixins.scss";
.navbar{
    position:fixed;
    top:0;
    z-index:99;
    width:7.5rem;
    margin:0 auto;
    display:flex;
    height:0.8rem;
    line-height:0.8rem;
	background:transparent;
    color:#fff;
    .icon{
        position:absolute;
        top:0;
        left:0.2rem;
        .iconfont{
            padding:0 0.1rem;
            font-size:0.4rem;
        }
    }
    .title{
        flex:1;
        text-align:center;
        font-size:$font-size-l;
    }
    &.active{
        background:$color-focus;
    }
}

#lottery{
    width:7.5rem;
    margin:0 auto;
    .lottery_wraper{
        width:5.75rem;
        margin:3.2rem auto 0 auto;
    }
    .content{
        min-height: 100%;
        background:url('../../assets/image/lottery_bg.png');
        background-size:100% 100%;
        background-repeat: no-repeat;
        padding-bottom:.5rem;
    }
}
.placeholder{
    width:100%;
    height:.8rem;
}
.modal{
    background: transparent;
    .close{
        position: absolute;
        top:-.5rem;
        right:0;
        width:.4rem;
        height:.4rem;
        @include bg-image('../../assets/image/close-lottery');
        background-size:100% 100%;
        background-repeat: no-repeat;
    }
}
.recordModal{
    width:6.56rem;
    height:8.79rem;
    background:#fff;
    border-radius:.4rem;
    overflow: hidden;
    .closeModal{
        position: absolute;
        top:0;
        right:0;
        width:.96rem;
        height:.96rem;
        @include bg-image('../../assets/image/task_modal_close');
        background-size:100% 100%;
        background-repeat: no-repeat;
    }
    .title{
        font-size:.3rem;
        color:#fff;
        margin:.3rem auto;
        width:3.96rem;
        height:.74rem;
        line-height:.74rem;
        text-align: center;
        @include bg-image('../../assets/image/lottery-record-title');
        background-repeat: no-repeat;
        background-size:100% 100%;
    }
    .tab{
        background:#fff4de;
        height:.55rem;
        line-height:.55rem;
        display:flex;
        text-align: center;
        color:#fb6048;
        font-size:.24rem;
    }
    .list{
        height:.7rem;
        line-height:.7rem;
        display:flex;
        text-align: center;
        border-bottom:1px solid #f4f4f4;
        color:#999;
        font-size:.22rem;
    }
     .product{
        width:3rem;
        padding-left: .5rem;
    }
    .time{
        flex:1;
    }
    .btns{
        position: absolute;
        bottom: 0;
        height: 50px;
        width: 100%;
        margin-top:.2rem;
        display:flex;
        justify-content: space-around;
    }
    .btn{
        width:2.59rem;
        height:.54rem;
        line-height:.54rem;
        text-align: center;
        background-size:100% 100%;
        background-repeat: no-repeat;
        color:#fff;
        font-size:.24rem;
        @include bg-image('../../assets/image/record-btn');
    }
}
.result{
    position: relative;
    padding-top:1.5rem;
    color:#fff;
    text-align: center;
    width:4.66rem;
    height:3.24rem;
    background-size:100% 100%;
    background-repeat: no-repeat;
    @include bg-image('../../assets/image/lottery-result');
    &.thank{
        width:4.9rem;
        height:3.7rem;
        display:flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: .4rem;
        font-size: .4rem;
        color: #999;
        @include bg-image('../../assets/image/thank-bg');
        .btn{
            height: .5rem;
            line-height: .5rem;
            width:auto;
            font-size: .2rem;
            color: #fff;
            padding:0 .3rem;
            background-size:100% 100%;
            background-repeat: no-repeat;
            @include bg-image('../../assets/image/goOn-button');
        }
    }
    &.startUp{
        width:5.36rem;
        height:5.34rem;
        @include bg-image('../../assets/image/lottery-startUp');
        background-size:100% 100%;
        background-repeat: no-repeat;
        .title{
            width:100%;
            p{
                line-height:.4rem;
                font-size:.2rem;
                color:#666;
                span{
                    color:#fb6048
                }
            }
        }
        .btn{
            position:absolute;
            bottom:.6rem;
            left:50%;
            transform: translateX(-50%);
            width:2.59rem;
            height:.54rem;
            line-height:.54rem;
            @include bg-image('../../assets/image/goOn-button');
            background-repeat: no-repeat;
            background-size:100% 100%;
            font-size:.24rem;
            color:#fff;
        }
    }
    &.noPoint{
        width:5.36rem;
        height:5.34rem;
        @include bg-image('../../assets/image/earnPoint');
        background-repeat: no-repeat;
        background-size:100% 100%;
        .title{
            top:.5rem;
            font-size:.2rem;
            color:#666;
        }
        .btn{
            position:absolute;
            bottom:.6rem;
            left:50%;
            transform: translateX(-50%);
            width:2.59rem;
            height:.54rem;
            line-height:.54rem;
            @include bg-image('../../assets/image/goOn-button');
            background-repeat: no-repeat;
            background-size:100% 100%;
            font-size:.24rem;
            color:#fff;
        }
    }
    .title{
        position:absolute;
        left:50%;
        transform: translateX(-50%);
        top: .4rem;
        font-size:.36rem;
        color:#fa652d;
    }
    p{
        font-size:.4rem;
    }
    .btn{
        margin:.3rem auto 0 auto;
        width:1.65rem;
        height:.64rem;
        line-height:.64rem;
        border-radius:.32rem;
        background: #fcdd33;
        color:#7f4e03;
    }
}
.rule{
   margin-top:1rem;
   text-align: center;
   font-size:.24rem;
   color:#fff; 
}
.chance{
    margin-top:.2rem;
    text-align: center;
    font-size:.3rem;
    color:#fff;
    span{
        font-size:.42rem;
        color:#ffbe04;
    }
}
.record-btn{
    margin:.2rem auto .5rem auto;
    width:2.59rem;
    height:.6rem;
    line-height:.6rem;
    text-align: center;
    @include bg-image('../../assets/image/record-btn');
    background-size:100% 100%;
    background-repeat: no-repeat;
    color:#fff;
}
</style>